<!DOCTYPE html>
<html>
<head>
    <title>MSBot 验证示例</title>
    <link rel="stylesheet" href="/static/css/msbot.css">
</head>
<body>
    <div class="msbot-widget">
        <h3 class="msbot-title">请验证您是真人用户</h3>
        <button id="verifyButton" class="msbot-button">点击验证</button>
        <div id="message" class="msbot-message" style="display: none;"></div>
    </div>

    <script src="/static/js/msbot.js"></script>
    <script>
        const msbot = new MSBot({
            vuid: 'YOUR_VUID_HERE',  // 从后端获取
            domain: window.location.hostname,
            endpoint: '/api/verify'
        });

        document.getElementById('verifyButton').addEventListener('click', async function() {
            const button = this;
            const message = document.getElementById('message');
            
            button.disabled = true;
            button.innerHTML = '验证中 <span class="msbot-loading"></span>';
            message.style.display = 'none';
            
            try {
                const result = await msbot.verify();
                
                if (result.success) {
                    // 验证成功，提交令牌到后端
                    const validation = await validateTokenOnServer(result.token);
                    
                    if (validation.valid) {
                        showMessage('验证成功!', 'success');
                        // 继续您的业务流程...
                    } else {
                        showMessage('验证失败，请重试', 'error');
                    }
                } else {
                    showMessage(`验证失败: ${result.error}`, 'error');
                }
            } catch (error) {
                showMessage(`发生错误: ${error.message}`, 'error');
            } finally {
                button.disabled = false;
                button.textContent = '点击验证';
            }
        });
        
        function showMessage(text, type) {
            const message = document.getElementById('message');
            message.textContent = text;
            message.className = `msbot-message msbot-${type}`;
            message.style.display = 'block';
        }
        
        async function validateTokenOnServer(token) {
            const response = await fetch('/validate_token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ token })
            });
            return await response.json();
        }
    </script>
</body>
</html>
